<template>
	<div style="background-color: white;">
		<template v-if="store.storeId">
			<img class="head" mode="widthFix" :src="store.storeImageUrl || 'https://pics.leshiguang.com/vpage/2024/05/17/93194f542cff4886991dab6b5860c67e.png'" alt="">
			<div class="scope">
					<StoreInfo :store="store" :canGoMap="true"/>
					<div class="time">
						<div class="time-title">营业时间</div>
						<div class="time-table">
							<div class="body table">
								<div class="cell" v-for="(item, i) in store.times" :key="i" style="display: flex;">
										<div style="flex: none; font-weight: bold; margin-right: 8px;">{{ weeks[i] }}</div>
										<div v-if="item.length">
											<div v-for="(item2, i2) in item" :key="i2" >
												{{ item2 }}
											</div>
										</div>
										<div v-else style="opacity: 0.5;">
											未知
										</div>
								</div>
							</div>
						</div>
					</div>
			</div>
		</template>
	</div>
</template>

<script>
import StoreInfo from './components/StoreInfo.vue';
import { parseTime, weeks } from './parseTime';
	export default {
		components: {
			StoreInfo
		},
		data() {
			return {
				store: {},
				weeks: weeks(),
				location: {},
			}
		},
		onLoad(e) {
			let that = this;
			wx.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				highAccuracyExpireTime: 3500,
				success: function(res) {
					console.warn('test', res)
					that.location = res
					that.getMyStore();
				},
				fail: function(res) {
					console.warn('errr', res)
					that.getMyStore();
				},
			});
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
          phoneNumber: this.store.storeTel //仅为示例 this.servicePhone是你要拨打的电话号码
        });
			},

			goMap() {
				this.$urouter.navigateTo({
					url: '/pagesStore/storeMap',
					params: {
					}
				});
			},

			getMyStore() {
				const params = {
					userId: global.userInfo.userId
				};
				// longitude": 121.4629833984375, "latitude
				if (this.location.longitude) {
					params.longitude = this.location.longitude
					params.latitude = this.location.latitude
				}
				this.$https.get(global.apiUrls.myStore, params).then(res => {
					if (res.data.success) {
						this.store = {...res.data.result, times: parseTime(res.data.result.localBussinessHours)};
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>

.head {
	width: 100%;
}

.scope {
	position: relative;
	background: white;
	padding: 16px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	top: -16px;

	.time {
		border-top: 1px solid rgba(34, 34, 34, 0.12);
		.time-title {
			font-size: #222;
			font-weight: bold;
			margin-bottom: 12px;
			margin-top: 12px;
		}

		.time-table {

			.table {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			.head {
				background: #057691;
				border-radius: 8px 8px 0 0;
				.cell {
					width: calc(100% / 2);
					text-align: center;
					padding: 9px 0;
					color: white;
					font-weight: bold;
					font-size: 12px;
				}
			}
			.body {
				.cell {
					color: #222;
					font-size: 13px;
					margin-bottom: 8px;

				}
			}
			
		}
	}
}


.flex {
	display: flex;
	align-items: center;;
}

.flex-col {
	display: flex;
	align-items: center;
	flex-direction: column;
}

</style>
